import React, { useMemo } from 'react';
import personalDataPic from '@/assets/entry/personalDataPic_1.png';
import { Button, Card, Layout, Steps } from 'antd';
import Header from '@/layouts/Header';
import logo from '@/assets/logo.png';
import Footer from '@/layouts/Footer';
import styles from './index.less';

const { Step } = Steps;

/**
 * 入职引导预览模板
 * @param props
 * @returns {JSX.Element}
 * @constructor
 */
const PreviewEntryGuide = props => {
    const renderStepButton = useMemo(
        () => (
            <>
                <Button type="primary" style={{ width: 200, height: 48, fontSize: 18 }}>
                    下载入职须知
                </Button>
                <Button type="ghost" style={{ marginLeft: 20, width: 200, height: 48, fontSize: 18 }}>
                    收藏该网页
                </Button>
            </>
        ),
        []
    );

    return (
        <Layout
            style={{
                minHeight: '100vh'
            }}
        >
            <Header logo={logo} menuData={[]} hideGlobalHeader />
            <Layout.Content>
                <div className={styles.entryGuideWrap}>
                    <div className={styles.topBarWrap}>
                        <div className={styles.leftText}>
                            <p>张三，你好！</p>
                            <p>
                                <b>请根据指引完成入职准备</b>
                            </p>
                        </div>
                        <div className={styles.rightImg}>
                            <img src={personalDataPic} alt="" />
                        </div>
                    </div>

                    <div className={`${styles.guideCardWrap} ${styles.guideContWrap}`}>
                        <Card
                            bodyStyle={{
                                padding: '24px 0 0',
                                width: 860,
                                margin: '0 auto'
                            }}
                            id="entryGuideWrap"
                            bordered={false}
                        >
                            <div className={styles.cardHeader}>
                                <span>新员工入职指引</span>
                                <Button type="link" style={{ marginRight: 0 }} icon="clock-circle">
                                    修改入职时间
                                </Button>
                            </div>
                            <Steps current={2} style={{ width: 490, margin: '0 auto 40px' }} labelPlacement="vertical">
                                <Step title="信息确认" />
                                <Step title="材料提供" />
                                <Step title="入职须知" />
                            </Steps>
                            {props.children}
                        </Card>
                        <div className={styles.footerBtns}>{renderStepButton}</div>
                    </div>
                </div>
            </Layout.Content>
            <Footer />
        </Layout>
    );
};

PreviewEntryGuide.displayName = 'PreviewEntryGuide';

export default PreviewEntryGuide;
